<template>
  <div class="checkCostCenter">
    <van-nav-bar
      class="header"
      :fixed="true"
      left-arrow
      color="#333"
      :border="false"
      title="选择成本中心"
      @click-left="close"
    >
    </van-nav-bar>
    <div class="contentWapper">
      <div class="searchInput">
        <van-search
          v-model="state.value"
          placeholder="请输入成本中心"
          @input="filterCostCenter"
        />
      </div>
      <div
        class="contentInfo"
        @click="checkValue(item)"
        v-for="item in state.cost_center_list"
        :key="item.id"
      >
        {{ item.text }}
      </div>
      <div class="noMore" v-show="!state.value">没有更多结果了</div>
    </div>
  </div></template
>

<script setup>
import { reactive, onMounted, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();
const emit = defineEmits(["getCostCenterData", "closeCostCenterData"]);

const state = reactive({
  value: "",
  cost_center_list: [],
  default_center_list: []
});

onMounted(() => {
  getCostCenterList();
});

// 查询成本中心
const getCostCenterList = async () => {
  const url = "/security/v1/common/searchCostCenters";
  const data = {
    member_id: localStorage.memberId
  };
  const ret = await proxy.$axiosJson(url, data);
  if (ret.ret_code === "10000") {
    ret.data.cost_centers.forEach(item => {
      let obj = {
        text: item.cost_center_name,
        code: item.cost_center_code,
        id: item.id
      };
      state.cost_center_list.push(obj);
      state.default_center_list.push(obj);
    });
  }
};

const filterCostCenter = () => {
  state.cost_center_list = state.default_center_list.filter(e => {
    return e.text.indexOf(state.value) !== -1;
  });
};

const checkValue = val => {
  emit("getCostCenterData", val);
  close();
};

const close = () => {
  emit("closeCostCenterData", false);
};
</script>

<style scoped lang="less">
.checkCostCenter {
  z-index: 102;
  position: fixed;
  top: 0;
  width: 100%;
  background: #f2f3f5;
  min-height: 100vh;
  overflow: auto;
  .header {
    .right {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: rgba(32, 140, 255, 1);
      line-height: 14px;
      img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
      }
    }
  }
  .contentWapper {
    position: absolute;
    top: 46px;
    width: 100%;
    padding-bottom: 16px;
    .searchInput {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 8px -4px rgba(0, 0, 0, 0.2);
      :deep(.van-search__content) {
        border-radius: 20px;
      }
    }
    .searchHistory {
      padding: 0 15px;
      .title {
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 14px;
        margin: 14px 0 20px 0;
      }
      .nameBox {
        .flex;
        flex-wrap: wrap;
      }
      .name {
        margin: 0 11px 15px 0;
        font-size: 11px;
        font-weight: 400;
        color: rgba(187, 187, 187, 1);
        line-height: 11px;
      }
    }
    .contentInfo {
      background: white;
      padding: 0 15px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 46px;
      border-bottom: 1px solid #f2f2f2;
    }
    .noMore {
      margin-top: 15px;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      color: rgba(180, 177, 177, 1);
      line-height: 14px;
    }
  }
}
</style>
